<template>
  <q-page class="region-drag">
    <q-tabs
      v-model="data.tab"
      class="bg-white"
      active-color="primary"
      indicator-color="transparent"
      dense
      :breakpoint="0"
    >
      <q-tab name="common" label="通用" />
      <q-tab name="notification" label="通知" />
    </q-tabs>
    <q-separator inset="" />
    <q-tab-panels v-model="data.tab" class="bg-transparent">
      <q-tab-panel name="common">
        <div class="form-item">
          <div class="form-label">启动</div>
          <div class="form-content">
            <q-checkbox v-model="data.openAt" label="开机后启动" dense />
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">自动更新</div>
          <div class="form-content">
            <q-checkbox
              v-model="data.autoUpdate"
              label="保持运行最新版本"
              dense
            />
            <div class="text-grey">当前版本：{{ data.version }}</div>
          </div>
        </div>
        <!-- <div class="form-item">
          <div class="form-label">登录</div>
          <div class="form-content">
            <q-checkbox v-model="data.autoAuth" label="启动后自动登录" dense />
          </div>
        </div> -->
      </q-tab-panel>
      <q-tab-panel name="notification">
        <div class="form-item">
          <div class="form-label">新消息通知</div>
          <div class="form-content">
            <q-checkbox
              v-model="data.soundNotification"
              label="开启声音通知"
              dense
            />
          </div>
        </div>

        <!-- MAC 通知设置 -->
        <div class="form-item" v-if="$q.platform.is.mac">
          <div class="form-label">通知横幅</div>
          <div class="form-content">
            <q-btn
              color="white"
              text-color="dark"
              dense
              unelevated
              label="前往系统偏好设置"
              @click="openPath"
              padding="0 10px"
            />
            <div class="text-caption text-grey-8">
              需前往“系统偏好设置 > 通知“进行设置
            </div>
          </div>
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </q-page>
</template>

<script>
import { ipcRenderer } from "electron";
import { computed, defineComponent, reactive } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "PagesSettingsPageVue",
  setup() {
    const $store = useStore();

    const data = reactive({
      tab: "common",
      version: "",
      openAt: computed({
        get: () => $store.state.persisted.openAt,
        set: (val) => {
          ipcRenderer.invoke("setOpenAtLogin", val);
          $store.commit("persisted/setData", { openAt: val });
        },
      }),
      soundNotification: computed({
        get: () => $store.state.persisted.soundNotification,
        set: (val) => {
          $store.commit("persisted/setData", { soundNotification: val });
        },
      }),
      autoUpdate: computed({
        get: () => $store.state.persisted.autoUpdate,
        set: (val) => {
          $store.commit("persisted/setData", { autoUpdate: val });
        },
      }),
    });

    ipcRenderer.invoke("getCurrentVersion").then((res) => {
      data.version = res.version;
    });

    return {
      data,
      openPath() {
        ipcRenderer.invoke("open-preference-panes", "Notifications.prefPane");
      },
    };
  },
});
</script>

<style lang="scss" scoped>
.form-item {
  display: flex;
  line-height: 32px;
  .form-label {
    width: 200px;
    text-align: right;
    padding-right: 20px;
  }
}
</style>
